<template>
  <div class="header">
    <div class="left" @click="toChange(1)" :class="isActive == 1? 'active':''">编辑操作</div>
    <div class="right" @click="toChange(2)" :class="isActive == 2? 'active':''">数据绑定</div>
  </div>
</template>
<script>
export default {
    data(){
        return{
            isActive:1
        };
    },
    methods:{
      // 切换类型
        toChange(e){
            this.isActive = e;
            // 传递信息
            this.$bus.$emit('changeId',e);
        }
    },
};
</script>
<style lang="scss" scoped>
.header {
  height: 56px;
  display: flex;
  background: #1c212b;
  div {
    width: 50%;
    font-size: 18px;
    font-family: Source Han Sans CN;
    font-weight: 300;
    color: #ffffff;
    opacity: 0.7;
    height: 56px;
    line-height: 56px;
  }
  .active {
    font-weight: 500;
    color: #5098ff;
    background: #1e2d43;
    border-top: 2px solid #5098ff;
  }
}
</style>
